<script setup>
// 导入Vue的响应式API
import { onMounted, ref } from 'vue'
// import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

// 定义响应式数据
const username = ref('') // 用户名
const password = ref('') // 密码
const rememberPassword = ref(false) // 记住密码状态

// 跳转注册页面
const router = useRouter()
const getRegister = () => {
  router.push({ path: '/Register' })
}

//密码可见/不可见
const passwordType = ref('password')
const changeType = () => {
  passwordType.value = passwordType.value === 'password' ? 'text' : 'password'
}

//登录验证
const userStore = useUserStore()
const loginIn = () => {
  if (password.value === '' || username.value === '') {
    ElMessage.error('请填写完整!')
  }
  else if (userStore.userPassword === password.value && userStore.userName === username.value) {
    userStore.rememberPsd = rememberPassword.value
    ElMessage.success('登录成功')
    router.push({ path: '/Home' })
  }
  else {
    ElMessage.error('用户名或密码错误！')
  }
}
onMounted(() => {
  // 如果选了记住密码就不用自己输入了
  if (userStore.rememberPsd === true) {
    password.value = userStore.userPassword
    username.value = userStore.userName
    rememberPassword.value = userStore.rememberPsd
  }
})

</script>


<template>
  <!-- 登录容器 -->
  <div class="login-container">
    <!-- 标题 -->
    <h2 class="login-title">用户登录</h2>

    <!-- 登录表单,按下回车快速验证 -->
    <form class="login-form" @submit.prevent="loginIn">
      <!-- 用户名输入组 -->
      <div class="input-group">
        <!-- <label for="username">请输入用户名</label> -->
        <input type="text" id="username" v-model="username" placeholder="请输入用户名" />
      </div>

      <!-- 密码输入组 -->
      <div class="input-group mima">
        <!-- <label for="password">请输入密码</label> -->
        <input :type="passwordType" id="password" v-model="password" placeholder="请输入密码" />
        <span class="iconfont icon-yanjing" @click="changeType"></span>
      </div>

      <!-- 记住密码选项 -->
      <div class="remember-me">
        <input type="checkbox" id="remember" v-model="rememberPassword" />
        <label for="remember">记住密码</label>
      </div>

      <!-- 登录按钮 -->
      <button class="login-btn">登录</button>

      <!-- 注册链接 -->
      <div class="register-link">
        <!-- 还没有账号？<a href="#" class="register-text">注册</a> -->
        还没有账号？<button @click="getRegister">注册</button>
      </div>
    </form>
  </div>
</template>


<style scoped>
/* 登录容器样式 */
.login-container {
  max-width: 400px;
  margin: 150px auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

/* 标题样式 */
.login-title {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
  font-size: 24px;
}

/* 表单样式 */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 输入组样式 */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-group label {
  font-size: 14px;
  color: #666;
}

.input-group input {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.input-group input:focus {
  outline: none;
  border-color: #409eff;
}

/* 密码眼睛 */
.mima {
  position: relative;
}

.icon-yanjing {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 20px;
}

/* 记住密码选项样式 */
.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

/* 登录按钮样式 */
.login-btn {
  padding: 12px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-btn:hover {
  background-color: #66b1ff;
}

/* 注册链接样式 */
.register-link {
  text-align: center;
  font-size: 14px;
  color: #666;
}

.register-text {
  color: #409eff;
  text-decoration: none;
}

.register-text:hover {
  text-decoration: underline;
}
</style>
